<template>
	<view class="page">
		<view class="top topCss" :style="{backgroundImage:'url('+componyInfo.background+')'}">
			<h3 class="brand">{{componyInfo.brand}}</h3>
			<!-- <view class="background"></view> -->
		</view>
		<view class="user-card">

			<view class="card">
				<view class="top">
					<!-- <view class="userImage">
						<open-data type="userAvatarUrl"></open-data>
					</view> -->
					<button class="userImageBtn">
						<image class="avatarImg" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
						<image class="avatarImg" src="../../static/defaultAvatar.jpg" v-else></image>
					</button>
				</view>
				<view class="bottom" v-if="hasLogin" @click="setUserInfo">
					<view class="left">
						<view class="user-text">
							<!-- <open-data type="userNickName"></open-data> -->
							<view v-if="userInfo.nickname">{{userInfo.nickname}}</view>
							<view v-else>微信用户</view>
							<!-- <input type="nickname" class="weui-input" placeholder="请输入昵称"/> -->
						</view>
						<view class="user-phone"> {{mobile.substr(0,3)+'****'+mobile.slice(-4)}} </view>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="bottom" v-else>
					<view class="tapLogin flex-center">
						<!-- <u-icon class="icon" name="arrow-right">点击登录</u-icon> -->
						<!-- <button class="getPhoneNumBtn" type="default" open-type="getPhoneNumber"
							@getphonenumber="decryptPhoneNumber">点击登录</button> -->
						<button class="getPhoneNumBtn" type="default" open-type="getPhoneNumber"
							@getphonenumber="phoneLogin">点击登录</button>
					</view>
				</view>
			</view>
		</view>
		<view class="list-card">
			<view class="card">
				<view class="item item-bottom-solid">
					<view class="left flex-center">
						<image src="../../static/myIcon/qiu.png" mode="aspectFit"></image>
					</view>
					<view class="center">
						<text>我要的色卡</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="card" @click="isAuthImgShow=true">
				<view class="item item-bottom-solid">
					<view class="left flex-center">
						<image src="../../static/myIcon/1.png" mode="aspectFit"></image>
					</view>
					<view class="center">
						<text>制作同款电子色卡</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="card" @click="goAdminPage">
				<view class="item">
					<view class="left flex-center">
						<image src="../../static/myIcon/2.png" mode="aspectFit"></image>
					</view>
					<view class="center">
						<text>我是管理员</text>
					</view>
					<view class="right flex-center">
						<u-icon class="icon" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="quit flex-center" @click="logout" v-if="hasLogin">
			<view class="btn flex-center">
				退出登录
			</view>
		</view>

		<!-- 头像昵称编辑弹窗 -->
		<u-modal v-model="isModalShow" @confirm="confirm" title="VIP头像昵称">
			<view class="editModal flex-center">
				<button class="editAvatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatarImg" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
					<image class="avatarImg" src="../../static/defaultAvatar.jpg" v-else></image>
					<view class="text-tips">
						点击修改
					</view>
				</button>
				<input @change="updateNickName" type="nickname" class="nickname-input" placeholder="请输入昵称"
					v-model="userInfo.nickname" />
			</view>
		</u-modal>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

		<u-mask :show="isAuthImgShow" @click="isAuthImgShow = false">
			<image :src="wxAuthorImage" class="mask-image" show-menu-by-longpress="true"></image>
		</u-mask>
	</view>
</template>
<style lang="scss" scoped>
	// ::v-deep .u-tabbar {
	// 	// 适配手机底部塌陷问题
	// 	padding-bottom: env(safe-area-inset-bottom);
	// }

	.page {
		height: 100vh;
		background-color: #F8F8F8;

	}

	.topCss {
		// background: linear-gradient(-45deg,#F9C7F4, #BCFFF3);
		background-color: #FFFFFF;
		border-bottom-left-radius: 22px;
		border-bottom-right-radius: 22px;
	}

	.top {
		height: 480rpx;
		// height: 250rpx;
		position: relative;

		.brand {
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			font-size: 88rpx;

			// color: #e6e6e6;
			color: #A22624;

			text-shadow: 1rpx -1rpx #FFFFFF, -1rpx 1rpx #999, -10rpx 10rpx #80808080;
		}

		.background {
			// background-color: #5199ff;
			border-bottom-left-radius: 22px;
			border-bottom-right-radius: 22px;
			position: absolute;
			bottom: 0;
			height: 180rpx;
			width: 100%;
		}
	}

	.icon {
		color: #96a1ae;
		font-size: 40rpx;
	}

	.user-card {
		height: 170rpx;
		padding: 0 15px;

		.card {
			position: relative;
			bottom: 62px;
			height: 250rpx;
			background-color: #fff;
			border-radius: 5px;

			.top {
				height: 30%;
				position: relative;

				.userImage {
					position: absolute;
					bottom: 24%;
					left: 10%;
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					border-radius: 50%;
					border: 2px solid white;

				}

				.userImageBtn {
					position: absolute;
					bottom: 24%;
					left: 10%;
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					border-radius: 50%;
					border: 2px solid white;
					//
					display: flex;
					align-items: center;
					justify-content: center;
					// 清除按钮默认样式
					margin: 0;
					padding: 0;
					outline: none;
					// border-radius: 0;
					background-color: transparent;
					line-height: inherit;

					.avatarImg {
						width: 150rpx;
						height: 150rpx;
					}
				}

				.userImageBtn::after {
					border: none;
				}
			}

			.bottom {
				display: flex;
				height: 70%;

				.left {
					width: 80%;
					height: 100%;
					position: relative;

					.user-text {
						width: 100%;
						font-size: 1.6em;
						padding-left: 80rpx;
						height: 50%;
					}

					.user-phone {
						color: #96a1ae;
						padding-left: 80rpx;
						height: 50%;
						width: 100%;
						font-size: 0.9em;
					}
				}

				.right {
					width: 20%;
					height: 50%;
				}

				.tapLogin {
					width: 100%;

					.getPhoneNumBtn {
						width: 100%;
						height: 100%;
						//文字居中
						display: flex;
						align-items: center;
						justify-content: center;
						// 清除按钮默认样式
						margin: 0;
						padding: 0;
						outline: none;
						border-radius: 0;
						background-color: transparent;
						line-height: inherit;
					}

					.getPhoneNumBtn::after {
						border: none;
					}
				}
			}
		}
	}

	.list-card {
		padding: 0 15px;

		.card {
			border-radius: 5px;
			position: relative;
			background-color: white;
			border-radius: 5px;
			padding: 5px 30px;

			.item {
				display: flex;
				height: 120rpx;

				.left {
					width: 15%;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.center {
					width: 65%;
					display: flex;
					justify-content: start;
					align-items: center;
					font-size: 1.1em;
				}

				.right {
					width: 20%;
					justify-content: flex-end;
				}
			}
		}
	}

	.item-bottom-solid {
		border-bottom: 1px solid #d4d6da;
	}

	.quit {
		height: 100rpx;
		margin-top: 50px;

		.btn {
			background-color: #FFFFFF;
			border-radius: 30px;
			width: 80%;
			// color: black;
			font-size: 1.2em;
			height: 100%;
		}
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.editModal {
		flex-direction: column;

		.editAvatarBtn {
			width: 250rpx;
			height: 250rpx;
			overflow: hidden;
			border-radius: 50%;
			border: 2px solid white;
			// 清除按钮默认样式

			margin: 20rpx 0;
			padding: 0;
			outline: none;
			// border-radius: 0;
			background-color: transparent;
			line-height: inherit;

			.avatarImg {
				width: 100%;
				height: 100%;
			}

			.text-tips {
				width: 100%;
				height: 30%;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				text-align: center;
				color: #ff7187;
				font-size: 32rpx;
				background-color: #eee;
				opacity: 0.5;
				// 毛玻璃效果
				// background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
				backdrop-filter: blur(10px);
				/* 背景模糊 */
				-webkit-backdrop-filter: blur(10px);
				/* 兼容老版本 Safari */
			}
		}

		.editAvatarBtn::after {
			// border:none;
		}

		.nickname-input {
			text-align: center;
			margin: 20rpx 0;
		}
	}

	.mask-image {
		width: 750rpx;
		height: 100vh;
	}
</style>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../js_sdk/mmmm-image-tools/index.js';
	import {
		mapState
	} from 'vuex';

	const uniIdCo = uniCloud.importObject("uni-id-co", {
		errorOptions: {
			type: 'toast'
		}
	});
	const uniObj_user = uniCloud.importObject("user-app-obj");

	export default {
		data() {
			return {
				code: '',
				user: {

				},
				accessToken: '',
				// 头像
				avatarUrl: '',
				nickName: '',
				isModalShow: false,
				isAuthImgShow: false,
				wxAuthorImage: 'https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/lm_wxAuthor.jpg'


			};
		},
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		async onLoad() {

			// 没有登录就注册绑定手机号
			// if(!this.hasLogin){
			// 	await this.getWxCode();
			// 	// await this.getUserInfo();
			// 	await this.loginServe(this.code);
			// }


		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage(res) {},
		created() {},
		methods: {
			async phoneLogin(e) {
				const phoneCode = e.detail.code;
				const {
					errCode,
					uid
				} = await uniIdCo.loginByWeixinMobile({
					phoneCode
				});
				console.log(errCode, uid, 'loginData');
				if (errCode == 0) {
					this.$store.dispatch('setUserInfo', uid);
				}

			},
			// 退出登录
			async logout() {

				this.$store.dispatch('logOut');
				this.user = {};
			},
			// 切换头像
			async onChooseAvatar(e) {
				console.log(e, '头像')
				const {
					avatarUrl
				} = e.detail;
				const {
					_id
				} = this.userInfo;
				const path = await pathToBase64(avatarUrl);
				
				const result = await uniObj_user.updateAvatar({
					_id,
					avatarUrl:path
				});
				

				this.$store.dispatch('setUserInfo', _id)
				// this.userInfo.avatarUrl = avatarUrl;
			},
			// 修改昵称
			async updateNickName(e) {
				const {
					_id
				} = this.userInfo;
				const nickname = e.detail.value;
				const result = await uniObj_user.updateNickName({
					_id,
					nickname
				});


				this.$store.dispatch('setUserInfo', _id)
			},
			// 模态框确认事件
			confirm() {
				if (!this.userInfo.nickname || !this.userInfo.avatar) {
					this.$refs.uToast.show({
						title: '请完善头像昵称',
						type: 'warning',
						position: 'top'
					})
					this.isModalShow = true;
				} else {
					this.isModalShow = false;
				}

			},
			setUserInfo() {
				this.isModalShow = true;
			},
			// 转发
			onShareAppMessage() {

			},
			// 分享到朋友圈
			onShareTimeline() {

			},
			goAdminPage() {
				uni.navigateTo({
					url: '/pages/admin/admin'
				})
			},


		},
		computed: {
			...mapState({
				token: (state) => state.user.token,
				token_expired: (state) => state.user.token_expired,
				newToken: (state) => state.user.newToken,
				userInfo: (state) => state.user.userInfo || {},
				hasLogin: (state) => state.user.hasLogin,
				// tabbarList: (state) => state.tabbar.tabbarList || [],
				componyInfo: (state) => state.aboutUs.componyInfo,

			}),
			mobile() {
				return this.userInfo.mobile || '';
			},
		}
	};
</script>